<template>
	<view class="container">

		<!-- 商品信息区域 -->
		<view class="product-container">
			<image class="product-image" src="https://img.freepik.com/free-psd/cosmetic-product-packaging-mockup_1150-40281.jpg" mode="aspectFill"></image>

			<view class="product-info">
				<view class="product-title">米莱达时尚翻领无袖衬衫女</view>
				<view class="product-tags">
					<text class="tag">高腰</text>
					<text class="tag">V领</text>
					<text class="tag">春季新款</text>
				</view>
				<view class="price-container">
					<text class="current-price">¥119.99</text>
					<text class="original-price">¥290.99</text>
				</view>
			</view>

			<!-- 店铺信息 -->
			<view class="shop-info">
				<view class="shop-logo">
					<image src="https://www.ruilongan.com/profile/upload/2025/07/14/Frame_6@2x (1)_20250714135533A101.png" mode="aspectFill"></image>
					<view class="tip-text">长按识别二维码查看商品详情</view>
				</view>
				<view class="qr-code">
					<image src="https://www.ruilongan.com/profile/upload/2025/07/14/gh_5f7898e99ff9_258_20250714135916A102.jpg" mode="aspectFill"></image>
				</view>
			</view>

		</view>

		<!-- 分享按钮 -->
		<view class="share-actions">
			<view class="action-item">
				<view class="icon-circle" open-type="share" @click="handleShare">
					<image src="https://www.ruilongan.com/profile/upload/2025/07/14/la_weixin@2x_20250714140309A103.png" mode="aspectFit"></image>
				</view>
				<!-- <text>转发给好友</text> -->
				<u-button :custom-style="customStyle" open-type="share" @click="share">
                    转发给好友
				</u-button>
			</view>
			<view class="action-item" @tap="handleSave">
				<view class="icon-circle">
					<image src="https://www.ruilongan.com/profile/upload/2025/07/14/icon-park-outline_down-picture@2x_20250714140333A104.png" mode="aspectFit"></image>
				</view>
                <u-button :custom-style="customStyle"  @click="handleSave">
                    保存图片
				</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					padding: '0',
					width: 'auto',
					background: 'transparent',
					border: 'none',
					color: '#666666',
					fontSize: '24rpx',
					lineHeight: '1',
					height: 'auto'
				}
			}
		},
		methods: {
			navigateBack() {
				uni.navigateBack()
			},
			handleShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://uniapp.dcloud.io/",
					title: "测试",
					summary: "测试分享好友！！！",
					imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			handleSave() {
				uni.saveImageToPhotosAlbum({
					success: () => {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
					},
					fail: () => {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
	}


	.product-container {
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		width: 620rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;

		.product-image {
			width: 100%;
			height: 750rpx;
		}

		.product-info {
			padding: 30rpx;

			.product-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.product-tags {
				margin-bottom: 20rpx;

				.tag {
					display: inline-block;
					padding: 4rpx 16rpx;
					background-color: #f5f5f5;
					color: #666;
					font-size: 24rpx;
					margin-right: 16rpx;
					border-radius: 4rpx;
				}
			}

			.price-container {
				.current-price {
					color: #ff4444;
					font-size: 40rpx;
					font-weight: bold;
					margin-right: 20rpx;
				}

				.original-price {
					color: #999;
					font-size: 28rpx;
					text-decoration: line-through;
				}
			}
		}
	}

	

	.shop-info {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 20rpx;
		background-color: transparent;
		border-top: none;

		.shop-logo {
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			image {
				width: 430rpx;
				height: 80rpx;
				margin-bottom: 16rpx;
			}

			.tip-text {
				font-size: 24rpx;
				color: #000000;
			}
		}

		.qr-code {
			image {
				width: 130rpx;
				height: 130rpx;
			}
		}
	}

	.tip-text {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		padding: 20rpx 0;
	}

	.bottom-actions {
		display: none;
	}
	
	.share-actions {
		width: 620rpx;
		display: flex;
		justify-content: center;
		gap: 160rpx;
		padding: 30rpx 0;
		background: transparent;

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.icon-circle {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16rpx;
				box-shadow: none;
	
				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
	
			text, button {
				font-size: 24rpx;
				color: #666;
				background: transparent;
				padding: 0;
				margin: 0;
				line-height: 1;
				&::after {
					border: none;
				}
			}
		}
	}
</style>